<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>站长注册</title>
	<link rel="stylesheet" href="../../libs/node_modules/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="../../style/common.css">
	<link rel="stylesheet" href="../../style/home/article.css">
	<link rel="stylesheet" href="../../style/login/register.css">
	<script src="../../libs/jquery-3.2.1.min.js"></script>
	<script src="../../libs/vue.js"></script>
	<!--<script src="../../jsc/axios.min.js"></script>-->
	<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>-->
	<script src="../../libs/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="../../libs/layer-v3.1.1/layer/layer.js"></script>
	<script src="../../libs/node_modules/echarts/dist/echarts.js"></script>
	<script src="../../jsc/axios.min.js"></script>
	<script src="../../jsc/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<!--<script src="js/system.js"></script>-->
</head>
<body>
<div id="app">
	<header-component></header-component>
	<navsearch-component></navsearch-component>
	<main>
		<div class="content">
			<div class="register-box">
				<form action="" class="register-form" name="content">
					<div class="register-process" style="margin-bottom: 4rem;position: relative">
						<span class="active">1</span>站长注册
						<hr style="border:none;border-bottom:1px dashed #FE7600;height:1px;width: 8.94rem">
						<span>2</span>完善信息
						<hr style="border:none;border-bottom:1px dashed #BFBFBF;height:1px;width: 8.94rem">
						<span>√</span>注册成功

						<div class="static-contact">
							<p>站长注册</p>
							<p>注册新基层站点请联系家园服网管理员</p>
							<p><img src="../../static/icons/邮箱个.png" alt="">jyufuwu@gfli.com</p>
							<p><img src="../../static/icons/手机g.png" alt="">13726346354</p>
							<p><img src="../../static/icons/微信g.png" alt="">13726346354</p>
						</div>
					</div>
					<div class="register-input-box">
						<div class="register-input-item" :style=" 'border:' + ( trueusername ? '1px solid rgba(229,229,229,1)' : '1px solid red' ) ">
							<div class="register-input-name">
								<img src="../../static/icons/用户名.png" alt="">
								用户名
							</div>
							<input type="text" placeholder="请设置6~12位，作为登录用户名" name="username" @change="yanzheng">
						</div>
					</div>
					<div class="register-input-box">
						<div class="register-input-item">
							<div class="register-input-name">
								<img src="../../static/icons/密码(1).png" alt="">
								设置密码
							</div>
							<input type="password" placeholder="请设置6~12位" name="password" v-model="pwd">
						</div>
					</div>
					<div class="register-input-box">
						<div class="register-input-item">
							<div class="register-input-name">
								<img src="../../static/icons/密码(1).png" alt="">
								确认密码
							</div>
							<input type="password" placeholder="请设置6~12位" name="repeatpwd" v-model="rpwd">
						</div>
					</div>
					<div class="register-input-box">
						<div class="register-input-item">
							<div class="register-input-name"
								 style="background: #FF9A42;color: #fff;padding-left: 0;justify-content: center;cursor: pointer"
								 data-toggle="modal" data-target="#myModal2">
								<!--<img src="../../static/icons/手机1.png" alt="">-->
								选择注册站点
							</div>
							<input type="text" :value="areavalue" :data-id="site_area_id" :data-level="area_level"
								   placeholder="请选择注册站点" style="border: none;padding-left: 2rem" name="website"
								   readonly>
						</div>
					</div>
					<div class="register-radio-box" v-if="town!=''">
						<div class="register-radio-item">
							<div class="register-input-name">
								站点类型
							</div>
							<div class="registet-check">
								<span>
									<input type="radio" id="xingzheng" name="level" hidden checked v-model="site_level" value=4><label for="xingzheng">行政分站 </label>
								</span>
								<span>
									<input type="radio" id="jiceng" name="level" hidden v-model="site_level" value=5><label for="jiceng">基层分站 </label>
								</span>
							</div>
						</div>
					</div>
					<div class="register-input-box">
						<div class="register-input-item">
							<div class="register-input-name">
								<!--<img src="../../static/icons/手机1.png" alt="">-->
								站点名称
							</div>
							<input type="text" placeholder="2-12位，作为站点名称" name="sitename" :value="staation_name_default" readonly v-if="site_level <= 4&&site_level!=0">
							<input type="text" placeholder="2-12位，作为站点名称" name="sitename"  v-if="site_level == 5||site_level == 0">
						</div>
					</div>
					<div class="register-input-box">
						<div class="register-input-item">
							<div class="register-input-name">
								<!--<img src="../../static/icons/手机1.png" alt="">-->
								站长手机号
							</div>
							<input type="text" placeholder="请输入11位手机号" name="mobile">
						</div>
					</div>
					<div class="register-input-box">
						<div class="register-input-item" style="width: 31.75rem">
							<div class="register-input-name">
								<img src="../../static/icons/验证码.png" alt="">
								验证码
							</div>
							<input type="text" placeholder="请输入验证码" name="code" @change="smscheck">
						</div>
						<a href="javascript:;" class="verify" @click="getcode">获取验证码 <span v-if="!timeOff">({{ time }})</span></a>
					</div>
					<p class="tips" style="width: 40.25rem;margin: 1rem auto;color: red;height: 13px;">{{ tips }}</p>
					<div class="register-input-check">
						<input type="checkbox" name="readed">我看过并接受（站长使用和管理协议）
					</div>
					<div class="register-input-box" style="padding-top: 1rem">
						<div class="register-btn" onclick="javascript:;" @click="register">下一步</div>
					</div>
					<div class="register-input-login">
						已有账户，<a href="login.html">去登录</a>
					</div>
				</form>
			</div>
		</div>
	</main>
	<footer-component></footer-component>
	<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered" role="document">
			<div class="modal-content">
				<div class="modal-body">
					<div class="station-title">
						<span @click="tocheck(1)" data-id="1" :data-sid=" province_id ">{{ province }}</span>
						<span @click="tocheck(2)" data-id="2" :data-sid=" city_id ">{{ city }}</span>
						<span @click="tocheck(3)" data-id="3" :data-sid=" area_id ">{{ area }}</span>
						<span @click="tocheck(4)" data-id="4" :data-sid=" town_id ">{{ town }}</span>
					</div>
					<div class="station-name-box">
						<span class="station-name one" v-if="checkindex ==1 " v-for="item in citylist_1" @click="one"
							  :data-id="item.id" :data-name="item.name">{{ item.name }}</span>
						<span class="station-name two" v-if="checkindex ==2 " v-for="item in citylist_2" @click="two"
							  :data-id="item.id" :data-name="item.name">{{ item.name }}</span>
						<span class="station-name three" v-if="checkindex ==3 " v-for="item in citylist_3"
							  @click="three" :data-id="item.id" :data-name="item.name">{{ item.name }}</span>
						<span class="station-name four" v-if="checkindex ==4 " v-for="item in citylist_4" @click="four"
							  :data-id="item.id" :data-name="item.name">{{ item.name }}</span>
					</div>
					<div style="display: flex">
						<div class="station-btn" data-dismiss="modal" @click="checkarea" style="flex: .4">选择当前行政区域</div>
						<!--<div class="station-btn" data-dismiss="modal" v-if="town!=''" style="flex: .4" @click="register_five">注册基层站长</div>-->
					</div>
					<div class="close-static-modal"><img data-dismiss="modal" src="../../static/icons/关闭.png" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<style>
	.register-input-check input[type='checkbox']:checked {
		background: url("../../static/icons/选中(1).png") no-repeat;
		border: 1px solid #FE7600;
		background-position-x: -2px;
		background-position-y: -2px;
	}
</style>
<script src="../../jsc/common.js"></script>
<script src="../../jsc/component.js"></script>
<script>
	function perfect() {
		window.location.href = 'perfect-info-station.html'
	}

	new Vue({
		el: "#app",
		data: {
			pwd: '',
			rpwd: '',
			checkcity: '请选择注册站点',
			citylist_1: [],
			citylist_2: [],
			citylist_3: [],
			citylist_4: [],
			province_id: 0,
			city_id: 0,
			area_id: 0,
			town_id: 0,
			city_name: '',
			checkindex: 1,
			province: '',
			city: '',
			area: '',
			town: '',
			areavalue: '',
			area_level: '',
			site_area_id: '',
			tips: '',
			truecode: false,
			trueusername:'null',
			time:60,
			site_level:'',
			timeOff: true,
			staation_name_default:''
		},
		mounted() {
			var _th = this;
			this.getcity()
		},
		filters: {},
		methods: {
			// var formdata = new FormData(document.forms.namedItem("content"));
			/***
			 * 注册
			 */
			// 用户名 6-12位数字或者字符串
			// 站点名称 2-10汉字
			// 密码 6-12数字或者字符串
			register: function () {
				var a = new FormData(document.forms.namedItem("content"));
				console.log(a.get('readed'));
				if (this.trueusername) {
					if (a.get('password').length > 5 && a.get('password').length < 13) {
						if (a.get('website')){
							if (this.regsitename(a.get('sitename'))) {
								if (a.get('mobile')) {
									if (a.get('readed')) {
										if (this.truecode) {
											let data = {
												username: a.get('username'),
												mobile: a.get('mobile'),
												password: a.get('password'),
												sitename: a.get('sitename'),
												site_area_id: this.site_area_id,
												site_level: this.site_level,
											};
											localStorage.setItem('reginfo', JSON.stringify(data));
											location.href = 'perfect-info-station.html'
										} else {
											layer.msg('请输入正确的验证码')
										}
										console.log(data);
									} else {
										layer.msg('请勾选站长使用和管理协议')
									}
								} else {
									layer.msg('请输入手机号')
								}
							} else {
								layer.msg('请输入2-30位站点名称')
							}
						} else{
							layer.msg('请选择注册站点')
						}
					} else {
						layer.msg('请输入6-12位密码');
					}
				} else {
					layer.msg('请输入6-12位用户名')
				}

			},
			/***
			 * 中文正则长度验证
			 */
			regsitename(truename) {
				var str = truename;
				console.log(str);
				//在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号
				var Expression = /^[\u4E00-\u9FA5]/;
				var objExp = new RegExp(Expression);
				if (objExp.test(str) == true && str.length > 1 && str.length < 30) {
					console.log('验证通过');
					return true;
				} else {
					console.log('验证失败');
					return false;
				}
			},
			/***
			 * 账号验证 6-12位非中文
			 */
			regname(truename) {
				var str = truename;
				console.log(str);
				//在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号
				var Expression = /^[\u4E00-\u9FA5]/;
				var objExp = new RegExp(Expression);
				if (!objExp.test(str) && str.length > 5 && str.length < 13) {
					console.log('验证通过');
					return true;
				} else {
					console.log('验证失败');
					return false;
				}
			},
			/***
			 * 校核账号是否存在
			 **/
			yanzheng(){
				var formdata = new FormData(document.forms.namedItem("content"));
				var username = formdata.get('username');

				var d = transFormData({
					username:username
				});
				var Expression = /^[\u4E00-\u9FA5]/;
				var objExp = new RegExp(Expression);
				if (!objExp.test(username) && username.length > 5 && username.length < 13){
					axios.post(sysurl+'user/checkUsername',d).then(res=>{
						console.log(res,'账号验证');
						if (res.data.code==1){
							this.trueusername = true
						} else{
							this.trueusername = false;
							layer.msg('账号已存在')
						}
					})
				} else{
					layer.msg('请输入6-12位数字或者英文用户名');
					this.trueusername = false;
				}
			},
			/**
			 *  验证码检测
			 */
			smscheck: function () {
				var s = new FormData(document.forms.namedItem("content"));
				console.log(s.get('code'));
				let da = new FormData;
				da.append('mobile', s.get('mobile'));
				da.append('event', 'register');
				da.append('captcha', s.get('code'));
				let that = this;
				axios.post(sysurl + 'sms/check', da).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						that.tips = '';
						that.truecode = true;
					} else {
						that.tips = res.data.msg;
					}
				})
			},

			/**
			 * 手机号验证码
			 */
			getcode: function () {
				var a = new FormData(document.forms.namedItem("content"));
				sendTime(a.get('mobile'),'register',this)
			},

			/**
			 * 返回指定级
			 */
			tocheck: function (e) {
				console.log(e);
				switch (e) {
					case 1:
						this.province_id = 0;
						this.city_id = 0;
						this.area_id = 0;
						this.town_id = 0;
						this.province = '';
						this.city = '';
						this.area = '';
						this.town = '';
						this.checkindex = 1;
						this.site_level = 1;
						break;
					case 2:
						this.city_id = 0;
						this.area_id = 0;
						this.town_id = 0;
						this.area = '';
						this.town = '';
						this.checkindex = 2;
						this.site_level = 2;
						break;
					case 3:
						this.area_id = 0;
						this.town_id = 0;
						this.town = '';
						this.checkindex = 3;
						this.site_level = 3;
						break;
					case 4:
						return false;
						break;
				}
				this.site_area_id = '';
				this.getcity();
			},
			/**
			 * 获取城市列表
			 */
			getcity: function () {
				let data = new FormData();
				data.append('province_id', this.province_id);
				data.append('city_id', this.city_id);
				data.append('area_id', this.area_id);
				data.append('town_id', this.town_id);
				console.log(data, '数据');
				axios.post(sysurl + 'common/areaFour', data).then(res => {
					this.citylist_1 = res.data.data;
					this.citylist_2 = res.data.data;
					this.citylist_3 = res.data.data;
					this.citylist_4 = res.data.data;
				})
			},
			/**
			 * 城市选择
			 */
			one: function (e) {
				this.province_id = e.target.dataset.id;
				this.checkindex = 2;
				this.site_level = 1;
				this.province = e.target.dataset.name;
				this.getcity()
			},
			two: function (e) {
				this.city_id = e.target.dataset.id;
				this.checkindex = 3;
				this.site_level = 2;
				this.city = '/' + e.target.dataset.name;
				this.getcity()
			},
			three: function (e) {
				this.area_id = e.target.dataset.id;
				this.checkindex = 4;
				this.site_level = 3;
				this.area = '/' + e.target.dataset.name;
				this.getcity()
			},
			four: function (e) {
				this.site_level = 4;
				this.town_id = e.target.dataset.id;
				this.town = '/' + e.target.dataset.name;
			},
			/**
			 * 确认选择城市
			 */
			checkarea: function () {
				this.areavalue = this.province + this.city + this.area + this.town;
				this.province_id == 0 ? layer.msg('请选择省份') : this.site_area_id = this.province_id;
				this.city_id == 0 ? console.log('只选择了省份') : this.site_area_id = this.city_id;
				this.area_id == 0 ? console.log('选择了城市') : this.site_area_id = this.area_id;
				this.town_id == 0 ? console.log('选择到了镇') : this.site_area_id = this.town_id;
				console.log(this.site_area_id, '最终选择的城市', this.province + this.city + this.area + this.town, this.site_level, '层级');
				this.staation_name_default = this.areavalue.split("/")[this.areavalue.split("/").length-1]
			},
			// 注册基层站长
			register_five:function(){
				this.areavalue = this.province + this.city + this.area + this.town;
				this.site_level = 5;
				this.province_id == 0 ? layer.msg('请选择省份') : this.site_area_id = this.province_id;
				this.city_id == 0 ? console.log('只选择了省份') : this.site_area_id = this.city_id;
				this.area_id == 0 ? console.log('选择了城市') : this.site_area_id = this.area_id;
				this.town_id == 0 ? console.log('选择到了镇') : this.site_area_id = this.town_id;
				console.log(this.site_area_id, '最终选择的城市', this.province + this.city + this.area + this.town, this.site_level, '层级');


			}

		}
	})
</script>
</body>
</html>
